﻿$(window).load(function () {
    $(".loading").fadeOut()
})

/****/
$(document).ready(function () {
    var whei = $(window).width()
    $("html").css({fontSize: whei / 20})
    $(window).resize(function () {
        var whei = $(window).width()
        $("html").css({fontSize: whei / 20})
    });
});


$(window).load(function () {
    $(".loading").fadeOut()
})
$(function () {
    echarts_1()
    echarts_2()
    echarts_3()
    echarts_4()
    echarts_5()
    echarts_6()
    echarts_7()
    echarts_8()
    // pe02()
    // pe03()

    function echarts_1() {
        $.get("/steam/publisherCnt", function (result) {
            var myChart = echarts.init(document.getElementById('echarts1'));
            data = result
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['游戏数量'],
                    top: '5%',
                    textStyle: {
                        color: "#fff",
                        fontSize: '12',

                    },
                    icon: 'circle',
                    itemGap: 35
                },
                grid: {
                    left: '0%',
                    top: '40px',
                    right: '0%',
                    bottom: '0',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: data.xdata,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        interval: 0,
                        rotate: 45,
                        show: true,
                        splitNumber: 5,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                        formatter: function (value) {
                            if (value.length > 6) {
                                return value.substring(0, 6) + '...';  // 长文本超出部分隐藏
                            } else {
                                return value;
                            }
                        }
                    },
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        //formatter: '{value} %'
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(255,255,255,.1	)",
                            width: 1,
                            type: "solid"
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                        }
                    }
                }],
                series: [{
                    name: '游戏数量',
                    type: 'scatter',
                    smooth: true,
                    data: data.ydata,
                    itemStyle: {
                        normal: {
                            color: '#90EE90',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                },
                ]
            };

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });


    }

    function echarts_2() {
        $.get('/steam/categoryCnt', function (result) {
            var myChart = echarts.init(document.getElementById('echarts2'));

            var option = {
                color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['好评率', '差评率'],
                    textStyle: {
                        color: "#fff"
                    },
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: [],
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            show: true,
                            splitNumber: 5,
                            textStyle: {
                                color: "rgba(255,255,255,.6)",
                                fontSize: '12',
                            },
                            formatter: function (value) {
                                if (value.length > 6) {
                                    return value.substring(0, 6) + '...';  // 长文本超出部分隐藏
                                } else {
                                    return value;
                                }
                            }
                        },

                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            fontSize:14,
                            color: "rgba(255,255,255,.6)"

                        },
                    }
                ],
                series: [
                    {
                        name: '好评率',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(128, 255, 165)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(1, 191, 236)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: [0]
                    },
                    {
                        name: '差评率',
                        type: 'line',
                        stack: 'Total',
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: 'rgb(0, 221, 255)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgb(77, 119, 255)'
                                }
                            ])
                        },
                        emphasis: {
                            focus: 'series'
                        },
                        data: []
                    },
                ]
            };
            for (let i = 0; i < result.xdata.length; i++) {
                option.xAxis[0].data.push(result.xdata[i])
                option.series[0].data.push(result.ydata[i])
                option.series[1].data.push(result.zdata[i])
            }
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }

    function echarts_3() {
        $.get("/steam/tagsCnt", function (result) {
            var myChart = echarts.init(document.getElementById("echarts3"));
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} "
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: []
                },
                series: [{
                    type: 'wordCloud',
                    //maskImage: maskImage,
                    sizeRange: [15, 80],
                    rotationRange: [0, 0],
                    rotationStep: 45,
                    gridSize: 8,
                    shape: 'pentagon',
                    width: '100%',
                    height: '100%',
                    textStyle: {
                        normal: {
                            color: function () {
                                // 定义鲜艳的颜色数组
                                const colors = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa07a', '#ffd700', '#3cb371', '#b8860b', '#30e0e0'];
                                return colors[Math.floor(Math.random() * colors.length)];
                            },
                            fontFamily: 'sans-serif',
                            fontWeight: 'normal'
                        },
                        emphasis: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: []
                }]
            };
            for (let i = 0; i < result.xdata.length; i++) {
                var mapData = {
                    name: '',
                    value: 0
                }
                mapData.name = result.xdata[i]
                mapData.value = result.ydata[i]
                option.series[0].data.push(mapData)
            }
            myChart.setOption(option);
            $(window).resize(myChart.resize);
        });

    }

    function echarts_5() {
        $.get('/steam/yearCnt', function (result) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts5'));

            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {type: 'shadow'},
                },
                // "grid": {
                //     "top": "15%",
                //     "right": "10%",
                //     "bottom": "20",
                //     "left": "10%",
                // },
                legend: {
                    data: ['新游戏数量'],
                    right: 'center',
                    top: 0,
                    textStyle: {
                        color: "#fff"
                    },
                    itemWidth: 12,
                    itemHeight: 10,
                },
                xAxis: [
                    {
                        "type": "category",

                        data: result.xdata,
                        axisLine: {lineStyle: {color: "rgba(255,255,255,.1)"}},
                        axisLabel: {
                            interval: 0,
                            rotate: 50,
                            show: true,
                            splitNumber: 15,
                            textStyle: {color: "rgba(255,255,255,.7)", fontSize: '14',},
                            formatter: function (value) {
                                if (value.length > 6) {
                                    return value.substring(0, 3) + '...';  // 长文本超出部分隐藏
                                } else {
                                    return value;
                                }
                            }
                        },

                    },
                ],
                yAxis: [
                    {
                        "type": "value",
                        splitLine: {show: false},
                        axisTick: {show: false},
                        "axisLabel": {
                            "show": true,
                            color: "rgba(255,255,255,.6)"

                        },
                        axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},//左线色

                    },

                ],
                series: [

                    {
                        "name": "新游戏数量",
                        "type": "bar",
                        "data": result.ydata,
                        "barWidth": "20%",

                        "itemStyle": {
                            "normal": {
                                barBorderRadius: 15,
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#fccb05'
                                }, {
                                    offset: 1,
                                    color: '#f5804d'
                                }]),
                            }
                        },
                        "barGap": "0"
                    },
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }

    function echarts_7() {
        $.get('/steam/developerCnt', function (result) {
            var myChart = echarts.init(document.getElementById('echarts7'));
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    textStyle: {
                        color: "#fff",
                        fontSize: '12',

                    },
                },

                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    splitLine: {
                        show: false // 隐藏网格线
                    },
                    axisLabel: {
                        interval: 0,
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: '12',
                        },

                    },

                },
                yAxis: {
                    type: 'category',
                    data: result.xdata,
                    splitLine: {
                        show: false // 隐藏网格线
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255,255,255,.6)',
                            fontSize:'14',
                        }
                    },
                },

                series: [
                    {
                        name: '游戏数量',
                        type: 'bar',
                        data: result.ydata,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                                    offset: 0,
                                    color: '#03c893'
                                },
                                    {
                                        offset: 1,
                                        color: '#0091ff'
                                    }
                                ]),
                                barBorderRadius: 15,
                            }
                        },
                    },
                ]
            };


            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }

    function echarts_6() {
        $.get('/steam/platformCnt', function (result) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echarts6'));


            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: [],
                            textStyle: {
                                color: 'rgba(255,255,255,.5)',
                                fontSize: '12',
                            }
                },
                calculable: true,
                series: [
                    {
                        name: '发布数量',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: [],
                    color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828', '#e58c00', '#eb295b'],
                    }
                ]
            };
            for (let i = 0; i < result.xdata.length; i++) {
                var mapData = {
                    name: '',
                    value: 0
                }
                option.legend.data.push(result.xdata[i])
                mapData.name = result.xdata[i]
                mapData.value = result.ydata[i]
                option.series[0].data.push(mapData)
            }


            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }

    function echarts_4() {
        $.get('/steam/priceCnt', function (result) {
            var myChart = echarts.init(document.getElementById('echarts4'));
            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}：{c}'
                },
                legend: {
                    data: [],
                    textStyle: {
                        color: "rgba(255,255,255,.5)",
                        fontSize: '12',
                    },
                },
                series: [
                    {
                        name: '游戏数量',
                        type: 'funnel',
                        left: '10%',
                        top: 60,
                        bottom: 60,
                        width: '80%',
                        min: 0,
                        max: 20000,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                    itemStyle: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        // 添加颜色配置
                        color: function(params) {
                            var colorList = [
                                '#1177AA', '#33AACC', '#55BBDD',
                                '#77AADD', '#99CCFF', '#AADDFF',
                                '#BBEEFF', '#CCDDFF', '#AAEEBB',
                                '#88CC99', '#66AA77', '#44AA55',
                                '#228833', '#006611', '#004488',
                                '#002255', '#000022', '#111133'
                            ];
                            return colorList[params.dataIndex];
                        }
                    },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: []
                    }
                ]
            };

            for (let i = 0; i < result.xdata.length; i++) {
                var mapData = {
                    name: '',
                    value: 0
                }
                option.legend.data.push(result.xdata[i])
                mapData.name = result.xdata[i]
                mapData.value = result.ydata[i]
                option.series[0].data.push(mapData)
            }

            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }

    function echarts_8() {
        $.get('/steam/ageCnt', function (result) {
            var myChart = echarts.init(document.getElementById('echarts8'));
            option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                },
                legend: {
                    orient: 'vertical',
                    top: '25%',
                    right: 0,
                    data: [],
                    textStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize: '12',
                    }
                },
                series: [
                    {
                        name: '游戏数量',
                        type: 'pie',
                        radius: [50, 80],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        // radius: ['40%', '50%'],
                        color: ['#62c98d', '#2f89cf', '#4cb9cf', '#e0c828', '#e58c00', '#eb295b'],
                        label: {show: false},
                        labelLine: {show: false},
                        data: []
                    }
                ]
            };
            for (let i = 0; i < result.xdata.length; i++) {
                var mapData = {
                    name: '',
                    value: 0
                }
                option.legend.data.push(result.xdata[i])
                mapData.name = result.xdata[i]
                mapData.value = result.ydata[i]
                option.series[0].data.push(mapData)
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        });

    }
})



		
		
		


		



















